<template>
  <div class="login w-full h-full flex flex-items-center flex-justify-center">
    <el-card class="w-100">
      <template #header>
        <div class="card-header text-align-center text-size-lg">
          <span>欢迎回来</span>
        </div>
      </template>

      <el-form class="m-6" ref="loginFormRef" :model="loginFormModel" size="large">
        <el-form-item prop="username">
          <el-input v-model="loginFormModel.username" placeholder="输入账号" status-icon />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginFormModel.password" placeholder="输入密码" show-password status-icon />
        </el-form-item>
        <el-form-item prop="code">
          <div class="flex felx-items-center">
            <el-input v-model="loginFormModel.code" maxlength="6" placeholder="输入验证码" />
            <div class="captcha ml-sm el-input--large" v-html="svgCaptcha" @click="getCaptchaSvg" />
          </div>
        </el-form-item>
        <el-form-item prop="code">
          <el-button class="w-full" type="primary" @click="onSubmit" :disabled="isLoginDisabled"
            :loading="loginLoading">登录</el-button>
        </el-form-item>
      </el-form>

      <template #footer>
        <p class="text-gray text-size-xs text-align-center">&copy; 2025 Youan. All rights reserved.</p>
      </template>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, computed } from "vue";
import { getCaptcha } from "@/service/modules/app";
import { ElMessage, type ElForm } from "element-plus";
import useAppStore from "@/store/app";
import type { LoginForm } from "@/types";
import { useRouter } from "vue-router"

const router = useRouter()
const appStore = useAppStore();
const loginFormRef = ref<InstanceType<typeof ElForm>>(); // elForm ref

var loginFormModel = reactive<LoginForm>({
  username: "admin",
  password: "s123456",
  code: "",
  key: ""
})
var svgCaptcha = ref<string>(""); // 验证码
var loginLoading = ref<boolean>(false);
var isLoginDisabled = computed(() => {
  return !loginFormModel.username || !loginFormModel.password || !loginFormModel.code;
})

onMounted(() => {
  getCaptchaSvg()
})

// 获取验证码
async function getCaptchaSvg() {
  const { data: result } = await getCaptcha();
  loginFormModel.key = result.key;
  svgCaptcha.value = result.image;
}

// 登录
function onSubmit() {
  loginFormRef.value?.validate(async (valid) => {
    if (valid) {
      try {
        loginLoading.value = true;
        await appStore.login(loginFormModel)
        loginLoading.value = false;
        router.push("/")
      } catch (error) {
        console.log(error)
        getCaptchaSvg()
        loginFormModel.code = ""
        loginLoading.value = false;
      }
    } else {
      ElMessage.error("请检查账号和密码")
    }
  });
}


</script>

<style lang="scss" scoped>
.login {
  background-color: #ff7143;

  .card-header {
    color: #ff7143;
  }
}

:deep(.captcha) {
  width: 180px;
  height: 40px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  cursor: pointer;

  svg {
    width: 100%;
    height: 100%;
  }
}
</style>
